<template>
    <div class="order-confirm-container">
        <div class="phone-box">
            <div class="left">
                <IconFont name="tips"></IconFont>
            </div>
            <div class="right">
                <div class="right-title">收货手机号</div>
                <nut-input v-model="phone" placeholder="手机号" />
            </div>
        </div>
        <div class="goods-detail">
            <div class="goods-box">
                <div class="goods-img">
                    <image src="http://supportmaster.liangpiao.net.cn/chuanshuo.jpg" style="width: 100%"
                        mode="widthFix"></image>
                </div>
                <div class="right">
                    <div class="right-goodsTitle">电影《传说》专属·全国通兑券</div>
                    <div class="right-goodsType">全国通兑券 x {{ num }}</div>
                </div>
            </div>
            <nut-divider style="color: #eee" />
            <div class="detail-item">
                <div class="key">购买数量</div>
                <div class="value">{{ num }}</div>
            </div>
            <div class="detail-item">
                <div class="key">配送方式</div>
                <div class="value">电子取票码</div>
            </div>
            <div class="detail-item">
                <div class="key">合计</div>
                <div class="value redColor">
                    ￥{{ ((price * num) / 100).toFixed(2) }}
                </div>
            </div>
        </div>
    </div>
    <Footer @onPay="onClickPay" :price="price" :num="num" :phone="phone"></Footer>
</template>
<script setup>
import { IconFont } from "@nutui/icons-vue-taro";
import Footer from "./footer.vue";
import Taro, { useDidShow, usePageScroll } from "@tarojs/taro";
import * as indexApi from "../../api/index";
import { storeToRefs } from "pinia";
import { useUserStore } from "../../store";
const userStore = useUserStore();
const { Userinfo, shareUserId, Token, openid } = storeToRefs(userStore);
const router = Taro.useRouter();
import { onMounted, ref } from "vue";
const phone = ref("");
const num = ref(0);
const price = ref(0);

onMounted(() => {
    num.value = router.params.num;
    price.value = router.params.price;
    console.log(num, price, "num", "price");
});
//立即支付
const onClickPay = async () => {
    let data = {
        count: num.value,
        openId: openid.value,
        phone: phone.value,
        productId: 1,
    };
    try {
        const orderRes = await indexApi.createdOrder(data);
        console.log(orderRes, "orderRes");
        if (orderRes.state == 200) {
            let orderId = orderRes.data; // 根据实际情况调整
            Taro.showLoading({
                title: "支付中...",
                mask: true,
            });
            const payData1 = await pollOrderResult(orderId, 10, 500);
            console.log(payData1, "payData1payData1");
            Taro.requestPayment({
                timeStamp: payData1.timeStamp,
                nonceStr: payData1.nonceStr,
                package: payData1.packageStr,
                signType: payData1.signType,
                paySign: payData1.paySign,
                success: function (res) {
                    Taro.showToast({
                        title: "支付成功",
                        icon: "success",
                    });
                    Taro.redirectTo({
                        url: "/pages/order/index",
                    });
                },

                fail: function (res) {
                    Taro.showToast({
                        title: "支付失败",
                        icon: "error",
                    });
                    setTimeout(() => {
                        Taro.redirectTo({
                            url: "/pages/order/index",
                        });
                    }, 200)

                },
            });
        }
    } catch (error) {
        Taro.showToast({
            title: "网络错误",
            icon: "error"
        })
    }
};

const getPayData = async (orderId) => {
    const orderResult = await indexApi.submitOrderResult({ orderId });
    if (orderResult.state == 200 && orderResult.code == 200) {
        return orderResult; // 返回订单结果
    }
};

const pollOrderResult = async (orderId, maxTries, delay) => {
    if (maxTries <= 0) {
        // 达到最大尝试次数，停止轮询
        console.error("达到最大尝试次数，未获取到订单结果");
        return null; // 返回 null 或抛出错误表示失败
    }

    try {
        // 调用接口获取订单结果
        const orderResult = await indexApi.submitOrderResult({ orderId });

        // 检查订单结果是否满足条件
        if (orderResult.state == 200) {
            switch (orderResult.code) {
                case 200:
                    // 订单已处理完成，停止轮询
                    console.log("订单处理完成", orderResult);
                    Taro.hideLoading();
                    return orderResult.data; // 返回订单结果
                case 202:
                    // 订单仍在处理中（可能是一个特殊的成功状态码）
                    console.log("订单仍在处理中（202），稍后重试...");
                    // 注意：这里你可能不需要返回，因为不是错误，但也不是完成
                    // 如果想继续轮询，则不要返回，让函数继续执行
                    Taro.hideLoading();

                    break;
                case 503:
                    // 服务器内部错误
                    console.error("服务器内部错误，稍后重试...");
                    // 你可以选择在这里继续轮询，或者返回错误
                    // 如果选择继续轮询，则不要返回
                    break;
                default:
                    // 其他未知的错误码
                    console.error("未知的订单结果错误码", orderResult.code);
                    // 你可以在这里决定是继续轮询还是返回错误
                    break;
            }
        } else {
            // HTTP状态码不是200，通常表示有错误发生
            console.error("HTTP状态码错误", orderResult.state);
            // 在这里你可以选择继续轮询，返回null，或者抛出错误
        }

        // 如果未达到终止条件，则等待一段时间后再次尝试
        console.log("订单仍在处理中，稍后重试...");
        await new Promise((resolve) => setTimeout(resolve, delay));

        // 递归调用自己进行下一轮轮询
        return await pollOrderResult(orderId, maxTries - 1, delay);
    } catch (error) {
        // 处理获取订单结果时出现的错误
        // 可以选择重试、记录错误或停止轮询等
        console.error("获取订单结果时出错", error);

        // 如果错误允许重试，并且还有剩余尝试次数，则递归调用自己
        if (maxTries > 1) {
            return await pollOrderResult(orderId, maxTries - 1, delay);
        } else {
            // 如果没有剩余尝试次数，则返回null或抛出错误
            return null; // 或者抛出错误
        }
    }
};
// const pollOrderResult = async (orderId, maxTries, delay) => {
//     if (maxTries <= 0) {
//         // 达到最大尝试次数，停止轮询
//         console.error("达到最大尝试次数，未获取到订单结果");
//         return;
//     }

//     try {
//         // 调用接口获取订单结果
//         const orderResult = await indexApi.submitOrderResult({ orderId });

//         // 检查订单结果是否满足条件（例如，是否已处理完成）
//         if (orderResult.state == 200 && orderResult.data.code === 200) {
//             // 订单已处理完成，停止轮询
//             console.log("订单处理完成", orderResult);
//             return orderResult;
//         } else if (orderResult.state == 200 && orderResult.data.code === 202) {
//             return

//         }  else if (orderResult.state == 200 && orderResult.data.code === 503){

//         }

//         // 否则，等待一段时间后再次尝试
//         console.log("订单仍在处理中，稍后重试...");
//         await new Promise(resolve => setTimeout(resolve, delay));

//         // 递归调用自己进行下一轮轮询
//         await pollOrderResult(orderId, maxTries - 1, delay);

//     } catch (error) {
//         // 处理获取订单结果时出现的错误
//         // 可以选择重试、记录错误或停止轮询等
//         console.error("获取订单结果时出错", error);

//         // 如果错误允许重试，并且还有剩余尝试次数，则递归调用自己
//         if (maxTries > 1) {
//             await pollOrderResult(orderId, maxTries - 1, delay);
//         }
//     }
// }
</script>
<style lang="less">
.order-confirm-container {
    padding: 20px 25px;

    .redColor {
        color: #ee0a24;
    }

    .phone-box {
        background-color: #fff;
        display: flex;
        padding: 25px;
        border-radius: 6px;
        justify-content: space-between;
        align-items: center;

        .left {
            padding: 0 20px;
        }

        .right {
            display: flex;
            flex-direction: column;
            flex: 1;

            .right-title {
                margin-left: 20px;
                color: #858a99;
                font-size: 26px;
            }
        }
    }

    .goods-detail {
        margin-top: 30px;
        background-color: #fff;
        padding: 25px;
        border-radius: 6px;

        .goods-box {
            display: flex;

            .goods-img {
                width: 130px;
            }

            .right {
                margin-left: 20px;

                .right-goodsTitle {
                    font-size: 26px;
                    font-weight: 700;
                }

                .right-goodsType {
                    font-size: 26px;
                    margin-top: 25px;
                    font-weight: 700;
                }
            }
        }

        .detail-item {
            font-size: 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .key {
                color: #858a99;
            }
        }

        .detail-item:nth-child(n + 2) {
            margin-top: 25px;
        }
    }
}
</style>
